<html>
<head>
<title>jQuery</title>
<style>
.blue { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>
jQuery(document).ready(function(){
//理解访问级别
	function TimeMachine(){
		//私有成员
		destinnation = 'October 5, 1955';
		 
		//共有成员
		this.getDestination = function(){
			return destinnation;
		}
	}
	var delorean = new TimeMachine();
	console.log(delorean.getDestination());		//October 5， 1955
	console.log(delorean.destinnation);			//undefined

//使用模块	
	//创建名称空间对象
	TIMEMachine = {};
	
	TIMEMachine.createDelorean = (function(){
	//私有成员
	var destiantion = '';
	var model = '';
	var fuel = '';
	
	//公有访问方法
	return {
	//设置器
	setDestination: function(dest){
		this.destiantion = dest;
	},
	setModel: function(model){
		this.model = model;
	},
	setFuel: function(fuel){
		this.fuel = fuel;
	},
	
	//访问器
	getDestination: function(){
		return this.destiantion;
	},
	getModel: function(){
		return this.model;
	},
	getFuel: function(){
		return this.fuel;
	},
	
	//其他成员
	toString: function(){
		console.log('Destiantion: ' + this.getModel() + ' Fuel Type: ' + this.getFuel() + 
		' Headed: ' + this.getDestination());
	}
	//在这里执行初始化过程
	};
	});
	
	var myTimeMachine = TIMEMachine.createDelorean();
	myTimeMachine.setModel('1985 Delorean');
	myTimeMachine.setFuel('plutoninum');
	myTimeMachine.setDestination('October 5, 1955');
	myTimeMachine.toString();
	
//获取 DOM 属性
	console.log($('#\\$abc').html());			//\\双斜杠为转义
	var userInfo = $("[id^='user']").length;	//获取以user开头的ID选择器
	console.log(userInfo);
	var userOther = $("[id!='userId']").length;	//获取非以user开头的ID选择器
	console.log(userOther);
	var userAll = $("[id*='user']").length;		//获取所有包含user的ID选择器
	console.log(userAll);
	var userOne = $("[id~='user']").length;		//获取精确匹配user的ID选择器
	console.log(userOne);
	//获取以Office1结尾和以的admin开头的name选择器
	var n = $("form[name$='Office1']form[name^='admin']").length;
	console.log(n);
	$("li:even").each(function(){console.log($(this).text());});	//匹配集合中的偶数成员
	$("li:odd").each(function(){console.log($(this).text());});		//匹配集合中的奇数成员
	$("li:firstt").each(function(){console.log($(this).text());});	//匹配集合中的第一个元素
	$("li:last").each(function(){console.log($(this).text());});	//匹配集合中的最后一个元素
	$("li:eq(3)").each(function(){console.log($(this).text());});	//匹配集合中的第4个元素
	$("li:gt(2)").each(function(){console.log($(this).text());});	//匹配集合中的大于2的元素
	$("li:lt(3)").each(function(){console.log($(this).text());});	//匹配集合中的小于3的元素
	
//基本过滤器
	console.log($(":text:hidden").length);							//过滤隐藏的text
	console.log($(":text:visible").length);							//过滤显示的text
	var jennies = $("p:contains('jenny')").length;					//过滤P中包含Jenny
	console.log(jennies);
	var hasDemo = $("div:has('p')").attr("id");						//获取子元素
	console.log(hasDemo);
	console.log($("p:empty").length);								//获取元素P为空的标签
	console.log($("p").first().html());								//获取第一个元素
	console.log($("p").eq(1).html());								//获取第二个元素
	console.log($("p").last().html());								//获取最后一个元素

//操作DOM
	var winners = $('#fow1 li').toArray();							//对象转换数组
	winners = winners.reverse();									//获取反面
	for (var i = 0, test = winners.length; i < test; i++) {			//遍历数组
		console.log(winners[i].innerHTML);							//输出内容
	}
	console.log($('div').find('p').andSelf());						//选取子内容和自己
	console.log($('p').text());										//选取所有P标签的值
	$('p').eq(4).html('<a href="#">Hello world.</a>');				//设置第五个P标签的值
	$('p').eq(4).text(function(){									//闭包设置第五个P标签的值
		var content = "";											//html() 可以解析html标签，text()不能
		for (i = 1; i <= 3; i++) {
			content += "testing " + i + "...<br />";
		}
		return content;
	});
	$('p#\\$abc').attr('class','blue');								//增加P元素下面ID的属性
	$('p#\\$abc').removeAttr('class');								//删除P元素下面ID的属性
	$("<h1>Have A Nice Day</h1>").appendTo("body").attr("class","blue");	//生成HTML
});
</script>

</head>
<body>
<div id="yay">
<p id="$abc">I'm a troble.</p>
<p>jenny smith.</p>
</div>
<p>jennyjones.</p>
<p>jim bob.</p>
<p></p>
<form name="adminUserOffice1" action="">
	<input id="userName" type="text" style="display:none;"/>
	<input id="userId" type="text" />
	<input id="userPhone" type="text" />
</form>

<ol id="fow1">
<li>Turkey</li>	<!-- 0 -->
<li>Chicken</li>	<!-- 1 -->
<li>Parrot</li>	<!-- 2 -->
<li>Pigeon</li>	<!-- 3 -->
<li>Hawk</li>	<!-- 4 -->
</ol>

<div onclick="hitMe();" class="blue">调用函数</div>
<div id="clickDiv" class="blue">DOM 事件</div>

</body>

<script type="text/javascript">
//点击事件	调用函数
function hitMe () {
	var txtNode = document.createTextNode("clicked");
	var br = document.createElement("br");
	document.getElementsByTagName("body")[0].appendChild(txtNode);
	document.getElementsByTagName("body")[0].appendChild(br);
}

//点击  	DOM 事件
jQuery(document).ready(function(){
	$("#clickDiv").click(function(){
		document.body.innerHTML += "<p>clicked</p>";
	});
});

$(document).ready(function(){
	$("#userId").bind('mouseover',function(event){alert(123);});		//为选择器添加事件
	$("#userId").unbind('mouseover');									//移除事件
	$("#userId").live('click',function(){alert(123);}).css("color","green");//为选择器添加事件
	$("#userId").die("click");											//移除事件
	$("#yay").delegate('p','click',function(){alert(123);});			//为选择器添加事件
	$("#yay").undelegate('click');										//移除事件
});
</script>
</html>